<template>
  <div class="infinite-container">

    <div class="fee-header">
      <mu-flexbox>
        <mu-flexbox-item class="pd10">住院号：{{account.inHospitalRecordNumber}}</mu-flexbox-item>
      </mu-flexbox>
    </div>

    <div class="fee-main">
      <div class="pd10">
        <span class="t1 f20">{{account.patientName}}</span>
        <span class="t3">{{account.departmentName}}</span>
      </div>
      <mu-flexbox class="pd10">
        <mu-flexbox-item >
          <div class="f12 t3">费用总额</div>
          <div class="f20">{{info.payedAmount | fixedMoney}}</div>
        </mu-flexbox-item>
        <mu-flexbox-item >
           <div class="f12 t3">余额</div>
          <div class="f20">{{info.surplusAmount | fixedMoney}}</div>
        </mu-flexbox-item>
      </mu-flexbox>
      <div class="t3 footer f12">入院日期：{{account.inDate}}</div>
    </div>

    <div class="fee-detail bgwhite">
      <div class="fee-detail-header center">
        <mu-icon-button icon=":iconfont icon-left" @click="handleClick(-1)" :disabled ="selectedDate <= goInDate && goInDate"/>
        <span class="" style="display:inline-block;width:100px;"><mu-date-picker v-model="selectedDate" fullWidth @change="dateChange" :minDate="goInDate"/></span>
        <mu-icon-button icon=":iconfont icon-small-arrow-right" @click="handleClick(1)" />
        <!-- <mu-icon-button icon=":iconfont icon-small-arrow-right" @click="handleClick(1)" :disabled ="selectedDate >= getFullDateByNum(new Date(), -1)"/> -->
      </div>
      <div class="fee-detail-calc pd10">
        <mu-flexbox>
          <mu-flexbox-item class="t3">
            合计费用
          </mu-flexbox-item>
          <mu-flexbox-item class="t1 text-right">
            {{account.totalCost | fixedMoney}}
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
        <ul class="fee-list bgwhite pd10" >
          <li v-for="(item, index) in account.mainCostList" :key="index">
            <mu-flexbox @click.native="item.show=!item.show">
              <mu-flexbox-item>
                {{item.chargeName}}
              </mu-flexbox-item>
              <mu-flexbox-item class="text-right">
                <span class="f14">{{item.amount | fixedMoney}}</span>
                <i class="t3 iconfont icon-small-arrow-right" v-show="!item.show"/>
                <i class="t3 iconfont icon-down"  v-show="item.show"/>
              </mu-flexbox-item>
            </mu-flexbox>
            <div class="fee-list-child" v-show="item.show">
              <mu-flexbox v-for="(v, i) in item.costList" :key="i">
                <mu-flexbox-item class="t3 maxlen" grow="3">
                  {{v.costName}}
                </mu-flexbox-item>
                <mu-flexbox-item class="t3">
                  {{v.costQuantity}}{{v.costUnit}}
                </mu-flexbox-item>
                <mu-flexbox-item class="text-right">
                  <span class="">{{v.costSubtotal | fixedMoney}}</span>
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
          </li>
        </ul>
      <div class="no-data" v-show="account.mainCostList.length === 0">
        暂无数据
      </div>
    </div>

   <mu-dialog :open="dialogOpen" >
      您当前没有住院，无法查询住院记录。
      <mu-flat-button slot="actions" @click="goBack" primary label="返回"/>
    </mu-dialog>
    <div class="bill-footer t3 center f12 pd10">此费用数据仅供参考，以医院实际费用为准。</div>

  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import {formatDate} from '@/common/js/util'
export default {
  components: {},
  data () {
    return {
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      account: {
        mainCostList: []
      },
      selectedDate: '',
      goInDate: '',
      dialogOpen: false,
      info: {
        payedAmount: '',
        surplusAmount: ''
      }
    }
  },
  mounted () {
    this.selectedDate = this.getFullDateByNum('', -1)
    // this.listBill('2018-01-02')
    this.listBill(this.selectedDate)
    this.getBalance()
  },
  methods: {
    goBack () {
      window.history.back()
    },
    dateChange (date) {
      this.selectedDate = date
      this.listBill(date)
    },
    handleClick (n) {
      this.selectedDate = this.getFullDateByNum(this.selectedDate, n)
      this.listBill(this.selectedDate)
    },
    getFullDateByNum (currentDate, n) {
      let today = new Date()
      if (currentDate) {
        today = new Date(currentDate)
      }
      if (typeof n === 'number' && n !== 0) {
        today.setTime(today.getTime() + 24 * 60 * 60 * 1000 * n)
      }
      return formatDate(today, 'yyyy-MM-dd')
    },
    listBill (costDate) {
      let params = {
        patientMedicalCardType: 1,
        patientMedicalCardNumber: '',
        patientCode: this.familyPerson.uid || '',
        patientIdentityCardType: this.familyPerson.cardtype || '',
        patientIdentityCardNumber: this.familyPerson.idcard || '',
        costDate: costDate
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.listBill}`, params, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1 && res.data.data && res.data.data.length > 0) {
          let data = res.data.data[0]
          this.goInDate = data.inDate
          if (data.mainCostList && data.mainCostList.length > 0) {
            data.mainCostList.forEach(v => {
              v.show = false
            })
          }
          this.account = data
        } else if (res.data.code === 1 && res.data.data && res.data.data.length === 0) {
          this.account.mainCostList = []
        } else if (res.data.code === -100) {
          // todo
          // this.dialogOpen = true
          this.account.mainCostList = []
        }
      })
    },
    getBalance () {
      this.$store.commit('UPDATE_LOADING')
      let param = {
        patientIdentityCardType: this.familyPerson.cardtype,
        patientIdentityCardNumber: this.familyPerson.idcard
      }
      commonAjax(`${RESTFUL_API.getBalance}`, param, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.info = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
 @import '../../common/css/vars.less';
 .fee-header {
   background-image: url(../../assets/images/bgGreen.png);
   background-size: 100%;
   height:150px;
   color: #fff;
 }
.fee-main {
  position: relative;
  top: -110px;
  background: #fff;
  border-radius: 8px;
  padding:1.5em 0 0;
  margin: 1em;
  box-shadow:0 0 5px rgba(0,0,0,.1);
  .footer {
    height: 40px;
    background: #F7F7F7;
    padding-left:10px;
    line-height:40px;
  }
}
.fee-detail, .bill-footer {
  position: relative;
  top: -110px;
  border-radius: 8px;
  margin: 1em;
}
.fee-detail-calc {
  background: #Fafafa;
}
.fee-list {
  >li {
    line-height:40px;
    border-bottom:1px solid #f2f2f2;
  }
}
.fee-list-child {
  padding: 2px 10px 2px 10px;
  font-size: 1em;
  line-height:26px;
  color: #666;
}
</style>
